<template>
  <div class="app-container">
    <!-- <el-button type="primary" @click="handleAdd">创建会员</el-button> -->

    <el-table :data="returnApplyList" style="width: 100%;margin-top:30px;" stripe>
      <el-table-column 
        prop="code" 
        align="center" 
        label="订单编号">
      </el-table-column>
      <el-table-column 
        prop="returnName" 
        align="center" 
        label="退货人姓名">
      </el-table-column>
      <el-table-column 
        prop="returnPhone" 
        align="center" 
        label="退货人电话">
      </el-table-column>
      <el-table-column 
        prop="reason" 
        align="center" 
        label="退货原因">
      </el-table-column>
      <el-table-column 
        prop="returnAmount" 
        align="center" 
        label="退还金额">
      </el-table-column>
      <el-table-column 
        prop="createTime" 
        align="center" 
        label="申请时间">
      </el-table-column>
      <el-table-column 
        prop="status" 
        align="center" 
        label="状态">
      </el-table-column>
      <el-table-column 
        prop="handleTime" 
        align="center" 
        label="处理时间">
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleStatus(scope)">审批</el-button>
          <el-button type="text" size="small" @click="handleDetail(scope)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
    </div>

    <!-- 修改订单信息 -->
    <el-dialog :visible.sync="dialogVisible" title="退货单详情">
      <!-- 订单基本信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">订单编号：</div></el-col>
          <el-col :span="6"><div class="grid-content">订单状态：</div></el-col>
        </el-row>
      </el-card>

      <!-- 收货人信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">收货人：</div></el-col>
          <el-col :span="6" :offset="2"><div class="grid-content">联系电话：</div></el-col>
          <el-col :span="6" :offset="2"><div class="grid-content">邮编：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">收货地址：</div></el-col>
          <el-col :span="18"><div class="grid-content"></div></el-col>
        </el-row>
      </el-card>

      <!-- 订单行 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">订单行：</div></el-col>
        </el-row>

        <el-table :data="orderItemList" style="width: 100%;margin-top:30px;" stripe>
          <el-table-column 
            prop="title" 
            align="center" 
            label="商品名称">
          </el-table-column>
          <el-table-column 
            prop="title" 
            align="center" 
            label="规格">
          </el-table-column>
          <el-table-column 
            prop="parent.title" 
            align="center" 
            label="图片">
          </el-table-column>
          <el-table-column 
            prop="level" 
            align="center" 
            label="单价">
          </el-table-column>
          <el-table-column 
            prop="name" 
            align="center" 
            label="数量">
          </el-table-column>
          <el-table-column 
            prop="createat" 
            align="center" 
            label="合计">
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 金额信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">总金额：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">运费：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">促销优惠：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">优惠券抵扣：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">积分抵扣：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">实付金额：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">可获得积分：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">可获得成长值：</div></el-col>
        </el-row>
      </el-card>
    </el-dialog>

  </div>
</template>

<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getMenus, getParents, addMenu, updateMenu, delMenu } from '@/api/permission'
import { getOrderReturnApplys, updateOrderReturnApplyStatus, getReturnApplyDetail } from '@/api/order'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  data() {
    return {
      returnApply: {},
      returnApplyList: [],
      dialogVisible: false,
      dialogType: 'new',
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getOrderReturnApplys()
  },
  methods: {
    async getOrderReturnApplys() {
      const res = await getOrderReturnApplys(this.page)
      console.log("getOrderReturnApplys",res)
      // this.serviceRoutes = res.data
      this.returnApplyList = res.data
    },
    async handleDetail(scope) {
      const res = await getReturnApplyDetail(scope.row.id)
      console.log("handleDetail",res)
      this.returnApply = res.data

      this.dialogVisible = true
    },
    handleStatus(scope) {
      const code = scope.row.code
      this.$confirm('审批退货单：'+code+'?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '拒绝',
        type: 'warning'
      })
        .then(async() => {
          await updateOrderReturnApplyStatus(scope.row.id).then(() => {
            this.$message({
              type: 'success',
              message: `已审核通过退货单：${code}`
            })
          })

          this.getOrderReturnApplys()
        })
        .catch(async() => { 
          await updateOrderReturnApplyStatus(scope.row.id).then(() => {
            this.$message({
              type: 'success',
              message: `已审核拒绝退货单：${code}`
            })
          })
          this.getOrderReturnApplys()
         })
    },

    async confirmSubmit() {
      const isEdit = this.dialogType === 'edit'

      if (isEdit) {
        await updateMenu(this.menu)
        this.$message({
            type: 'success',
            message: '更新菜单成功!'
          })
      } else {
        await addMenu(this.menu)
        this.$message({
            type: 'success',
            message: '创建菜单成功!'
          })
      }

      this.dialogVisible = false
      this.getMenus()

    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
